<template>
  <div class="print-send">
    <div class="print-box">
      <div class="print-header">{{ orderInfo.apiOrderNo || orderInfo.orderNo }}</div>
      <div class="top">
        <div>{{ orderInfo.orderTime }}</div>
        <div class="title">{{ orderInfo.patientName }}&{{ orderInfo.docName }}医生药品清单</div>
      </div>
      <header>{{ orderInfo.source || store.storeName }}寄送单</header>
      <div class="info">
        <div style="width:100%">开方时间：{{ orderInfo.orderTime }}</div><br/>
        <div style="width:100%" class="delivery delivery-top" v-if="orderInfo.remark " >备注：{{ orderInfo.remark }}</div>
        <div style="width:100%" class="delivery delivery-top" v-if="orderInfo.deliveryType == 1">收货地址：{{ adderss }}</div>
        <div style="width:100%"  class="delivery" v-if="orderInfo.deliveryType == 2">自取</div>
        <!-- <div>药房：{{ orderInfo.sourceStoreName }}</div> -->
      </div>
      <div class="info">
        <!-- <div>收货地址：{{ adderss }}</div> -->
      </div>
      <template v-for="(info, index) in infos">
        <div :key="info.id" :class="'list list-' + index">
          <div class="lists">
            <template v-for="(drug, index) in info.infoDrugs">
              <template v-if="drug.quantity - drug.refundCount > 0">
                <div :key="drug.id" class="list-item" v-if="info.prescriptionType != 2">
                  <div>
                    <span class="drug-name">{{ index + 1 }}.{{ drug.drugName }}</span>
                    <span v-if="drug.decoctionName != '常规'&&drug.decoctionName">({{ drug.decoctionName }})</span>
                  </div>
                  <div>
                    <span>{{ drug.dose }}{{ drug.doseUnit }}</span>
                  </div>
                </div>
                <div :key="drug.id" class="list-item1" v-if="info.prescriptionType === 2">
                  <template v-if="drug.isCirulation != 1">
                    <div>
                    <span class="drug-name">{{ index + 1 }}.{{ drug.drugName }}</span>
                    <span>{{ drug.specification }}</span>
                    <span>{{ drug.frequency }},每次{{ drug.dose }}{{ drug.doseUnit }} {{ drug.useFlag }}</span>
                  </div>
                  <div>
                    <span>{{ drug.quantity - drug.refundCount }}{{ drug.packUnit }}</span>
                  </div>
                  </template>
                </div>
              </template>
            </template>
          </div>
          <div class="bottoms">
            <template v-if="info.prescriptionType != 2">
              <el-row class="bottoms-row">
                <span v-if="info.prescriptionType != 2">剂数：{{ info.num }}剂<template v-if="info.prescriptionType != 1">(两袋为一剂)</template>；</span>
                <span v-if="info.prescriptionType == 1"> 剂型：{{ pstTypeList[info.pstType] }}；</span>
                <span v-if="info.prescriptionType == 3"> 剂型：颗粒；</span>
                <span v-if="info.prescriptionType != 2">
                  <!-- <span>用法：{{ info.takeMethod }}</span> -->
                  <span>用法：</span>
                  <template v-if="info.prescriptionType == 1">
                    <template v-if="info.useFlag">
                      <span>{{ info.useFlag }}，</span>
                    </template>
                    <span>详见温馨提示</span>
                  </template>
                  <template v-else>
                    <span>{{ info.frequency }}</span>
                    <template v-if="info.useFlag">
                      <span> {{ info.useFlag }}</span>
                    </template>
                  </template>
                </span>
              </el-row>
              <el-row class="bottoms-row">
                <el-col :span="12" v-if="info.prescriptionType != 2">
                  <!-- <span>总净重：{{ info.drugTotal }} ± 5g</span> -->
                  <el-col :span="12">&nbsp;</el-col>
                </el-col>
                <el-col :span="12" style="text-align:right">
                  <span>药费：{{ formatMoney(info.drugCost, 2) }}</span>
                  <span v-if="info.processCost" style="padding-left:5px;">加工费：{{ formatMoney(info.processCost, 2) }}</span>
                </el-col>
              </el-row>
            </template>
            <template v-else>
              <el-row class="bottoms-row">
                <el-col :span="12">&nbsp;</el-col>
                <el-col :span="12" style="text-align:right">
                  <span>药费：{{ formatMoney(info.drugCost -info.cirulationCost, 2) }}</span>
                </el-col>
              </el-row>
            </template>
          </div>
        </div>
      </template>
      <div class="list last-list">
        <div class="bottom">
          <div>
            <div>药费：{{ formatMoney(orderInfo.drugCost -orderInfo.cirulationCost, 2) }}</div>
            <div>诊断：{{ consult.diagnosis }}</div>
          </div>
          <div>
            <div>加工费：{{ formatMoney(orderInfo.machinFee, 2) }}</div>
            <div>医嘱：{{ consult.consultComplaint || '无' }}</div>
          </div>
        </div>
      </div>
      <div class="tips">
        <div class="label">★温馨提示：</div>
        <div>
          <div>①代煎：早晚各一包水药，餐后半小时服用（代煎1剂等于2包）；</div>
          <div>②自煎：一天一付草药，一次性煎出400毫升药汁，分早晚两次服用；</div>
          <div>③《医疗机构药事管理规定》第二十八条明确规定：为保障患者用药安全，除药品质量原因外，药品一经发出，不得退换。</div>
        </div>
      </div>
      <div class="msg">
        <div class="msg-left">
          <template v-if="apiChannelStore && apiChannelStore.ewmUrl">
            <img :src="apiChannelStore.ewmUrl" >
          </template>
          <template v-else>
            <img :src="store.storeEwm" >
          </template>
          <div class="text">
            <div data-v-bf675742="" class="text">
              <div data-v-bf675742="">
                <template v-if="orderInfo.sourceStoreName">
                  <span>药品配送服务由{{ orderInfo.sourceStoreName  }}提供</span>
                </template>
                <template v-else>
                  <span>药品配送服务由{{ store.storeName  }}提供</span>
                </template>
              </div>
              <div data-v-bf675742="">
                如有任何疑问，<span data-v-bf675742="" style="font-weight: bold;">请在签收后24小时内</span>
              </div>
              <div data-v-bf675742="">微信扫描左侧二维码咨询客服</div>
              <div data-v-bf675742="">或拨打 {{ store.phone }} 联系我们</div>
            </div>
          </div>
        </div>
        <div class="msg-right">
          <img id="barcode">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatMoney } from "@/utils/index";
import JsBarcode from 'jsbarcode'

export default {
  name: "printDetails",
  props: {
    data: {
      type: Object,
      default() {
        return null;
      }
    }
  },
  data() {
    return {
      orderInfo: {},
      infos: [],
      consult: {},
      store: {},
      orderAddress: {},
      apiChannelStore: {},
      printConfig: {
        id: "#print",
        popTitle: "打印预览"
      },
      pstTypeList: ['西药及中成药', '饮片', '颗粒', '打粉', '制丸', '膏方'],
    }
  },
  computed: {
    adderss() {
      if(this.orderAddress && this.orderAddress.username) {
        return `${ this.orderAddress.username } ${ this.orderAddress.phone } 
        ${ this.orderAddress.province }${ this.orderAddress.city }${ this.orderAddress.area }${ this.orderAddress.address }`;
      }
      return "";
    }
  },
  watch: {
    data() {
      this.loadData();
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    formatMoney,
    loadData() {
      let res = this.data;
      if(!res) return;
      this.loading = false;
      this.orderInfo = res.order;
      this.infos = res.infos;
      this.consult = res.consult;
      this.store = res.store;
      this.orderAddress = res.orderAddress;
      this.apiChannelStore = res.apiChannelStore;

      var newList = [];
      this.infos.forEach(item => {
        if(item.payStatus != 3&&item.payStatus != 4&&item.orderCondition != 5){
          newList.push(item);
          // var index = this.infos.indexOf(item)
          // this.infos.splice(index,1)
        }
      });
      this.infos = [];
      this.infos = newList;

      // for (let i = 0; i < this.infos.length; i++) {
      //   var item = this.infos[i];
      //   if(item.payStatus == 3||item.payStatus == 4||item.orderCondition == 5){
      //     var index = this.infos.indexOf(item)
      //     this.infos.splice(index,1)
      //   }
        
      // }

      // this.infos.forEach(info => {
      //   var tList = info.infoDrugs;
      //   info.infoDrugs = [];
      //   tList.forEach(dg => {
      //     if(dg.isCirulation != 1){
      //       info.infoDrugs.push(dg);
      //     }
      //   });
      // });

      this.infos.forEach(info => {
        var tList = info.infoDrugs;
        info.infoDrugs = [];
        tList.forEach(dg => {
          if(dg.isCirulation != 1){
            info.infoDrugs.push(dg);
          }
        });
        let drugTotal = 0;
        info.infoDrugs.forEach(drug => {
          console.log("drug---->",drug);
          if(info.prescriptionType === 2) {
            drugTotal += drug.quantity;
          } else {
            drugTotal += drug.dose;
          }
        });
        if(info.prescriptionType != 2) {
          // 非成药，总净重*剂数，并带上剂量单位
          drugTotal = drugTotal * info.num;
          drugTotal += "" + info.infoDrugs[0].doseUnit;
        }
        info.drugTotal = drugTotal;
      });
      JsBarcode("#barcode", res.order.apiOrderNo || res.order.orderNo);
    },
    onPrint() {
      if(this.$refs.btn) {
        this.$refs.btn.$el.click()
      }
    },
    getDecoctionName(name) {
      if(!name || name == '常规') {
        return '';
      }
      return "(" + name + ")";
    }
  }
}
</script>

<style lang="scss" scoped>
.print-header {
  display: none;
}
@media print {
  .print-header {
    word-wrap: break-word;
    word-break:break-all;
    position: fixed;
    display: block;
    width: 5px;
    left: 10px;
    top: 20px;
  }

  .print-send {
    padding-top: 20px;
  }
}

.print-send {
  font-size: 14px;
  padding: 20px 30px;
  
  .print-box {
    border: 1px solid #000;
    margin: 0 auto;
    padding: 10px;
    width: 170mm;
    
    .top {
      position: relative;
      
      .title {
        position: absolute;
        text-align: center;
        font-weight: bold;
        width: 100%;
        left: 0;
        top: 0;
      }
    }

    header {
      text-align: center;
      font-weight: bold;
      font-size: 20px;
      padding: 10px;
    }

    .info {
      justify-content: space-between;
      padding-bottom: 5px;
      flex-wrap: wrap;
      display: flex;

      div:last-child {
        padding-right: 50px;
      }

      .delivery {
        font-weight: bold;
      }

      .delivery-top {
        margin-top: 5px;
      }
    }

    .list {
      border-bottom: 1px solid #000;
      margin-top: 10px;

      .lists {
        flex-wrap: wrap;
        display: flex;
      }

      .list-item,
      .list-item1 {
        justify-content: space-between;
        margin-left: 10px;
        padding: 5px 0;
        display: flex;
        width: 30%;

        .drug-name {
          font-weight: bold;
        }
      }

      .list-item1 {
        width: 100%;
      }

      .bottom {
        margin-top: 40px;
        margin-bottom: 5px;

        div {
          display: flex;
          padding-bottom: 2px;
          div {
            width: 50%;
          }
        }
      }
      .bottoms {
        margin-top: 40px;
        margin-bottom: 5px;

        .bottoms-row {
          margin-bottom: 5px;
        }
      }
    }

    .list.list-0 {
      border-top: 1px solid #000;
    }

    .list.last-list {
      border-bottom: 0;
      
      .bottom {
        margin-top: 0;
      }
    }

    .tips {
      border-bottom: 1px solid #000;
      border-top: 1px solid #000;
      padding: 10px 0;
      font-size: 14px;
      display: flex;

      .label {
        width: 135px;
      }
    }

    .msg {
      justify-content: space-between;
      margin-top: 10px;
      display: flex;

      .msg-left {
        align-items: center;
        display: flex;

        img {
          height: 100px;
          width: 100px;
        }

        .text {
          padding-left: 5px;

          div {
            font-size: 16px;
          }
        }
      }

      .msg-right {
        width: 56mm;

        img {
          width: 100%;
        }
      }
    }
  }
}

</style>